{% extends 'demos/live_demo.html.twig' %}

{% block demo_content %}
    <twig:NewProductForm />
{% endblock %}

{% block code_block_full %}
    <twig:Code:CodeWithExplanationRow filename="src/Twig/Components/NewProductForm.php" sticky>
## New Product Form

Live component with a form, `ValidatableComponentTrait` and a
`saveProduct()` LiveAction for instant validation & an AJAX submit.

The real magic comes from `#[LiveListener('category:created')`. This
is emitted by the `NewCategoryForm` component (which opens
in a modal) when a new category is created.

Note: the `category:created` event emits `category` as an *integer*.
Then, thanks to the `Category` type-hint + Symfony's standard
[controller argument behavior](https://symfony.com/doc/current/doctrine.html#automatically-fetching-objects-entityvalueresolver),
Symfony uses that id to query for the `Category` object.
    </twig:Code:CodeWithExplanationRow>

    <twig:Code:CodeWithExplanationRow filename="templates/components/NewProductForm.html.twig" sticky reversed>
## New Product Template

Near the bottom, this renders the `BootstrapModal` component with another
component - `NewCategoryForm` - inside of it. Opening the modal is done entirely
with normal Bootstrap logic: an `a` tag with `data-bs-toggle="modal"`
and `data-bs-target="#new-category-modal"`.
    </twig:Code:CodeWithExplanationRow>

    <twig:Code:CodeWithExplanationRow
        filename="src/Twig/Components/NewCategoryForm.php" sticky
    >
## New Category Form

This component opens up in the modal! It has a `#[LiveAction]` that saves
the new `Category` to the database and then does two important things:

1. Emits the `category:created` event with the new `Category`'s id (see
   `NewProductForm.php`).
1. Dispatches a browser event called `modal:closed` to close the modal
   (see `bootstrap-modal-controller.js`).
    </twig:Code:CodeWithExplanationRow>

    <twig:Code:TabbedCodeBlocks :files="[
        'src/Twig/Components/BootstrapModal.php',
        'templates/components/BootstrapModal.html.twig',
        'assets/controllers/bootstrap-modal-controller.js',
    ]" />
{% endblock %}

{% block code_block_left %}

{% endblock %}

{% block code_block_right %}
    {% component CodeBlock with {filename: 'templates/components/InlineEditFood.html.twig', height: '400px'} %}
        {% block content %}
            {{- source('components/InlineEditFood.html.twig') -}}
        {% endblock %}
    {% endcomponent %}
{% endblock %}
